<template>
	<view>
		<map :scale='15' id="myMap"  style="width: 100%;height: 600rpx;"
		:markers="markers"  :longitude="longitude" :latitude="latitude" @tap="onTap"></map>
		<view class="select-box">
			<input class="search" placeholder="搜索地点" @confirm="filterAdd" />
		</view>
			<scroll-view scroll-y :style="{height: screenHeight + 'rpx'}">
				<view class="select-box" v-if="list.length > 0">
					<view class="item c-c-fs" :class="currentIndex === index ? 'item-active' : ''" v-for="(item, index) in list" :key="item.id" @click="changeAdd(item, index)">
						<view class="title">{{item.address}}</view>
						<view class="title-sub">{{Number(item.distance).toFixed(2)}}m | {{region}}</view>
					</view>
				</view>
				<view class="none c-c-c" v-else>
					暂无数据~
				</view>
			</scroll-view>
	</view>
</template>

<script>
	import { wxGetAddress } from '@/utils/map.js'; 
	export default {
		name:"map",
		data() {
			return {
				latitude: 39.9,
				longitude: 116.4,
				markers:[], //标记点
				list: [],
				currentIndex: -1,
				region: '',
				screenHeight: 0,
				allList: [],
				checkedAdd: ''
			};
		},
		onLoad() {
			this.screenHeight = wx.getSystemInfoSync().windowHeight - 26;
			this.getLocationInfo();
		},
		onShow() {
			this.checkedAdd = uni.getStorageSync('address');
		},
		methods: {
			// 获取地理位置
			getLocationInfo() {
				var that = this
				uni.getLocation({
					type: 'wgs84',
					success(res) {
						let { latitude, longitude } = res;
						that.latitude = latitude
						that.longitude = longitude
						that.addMaekers(longitude, latitude);
						that.loadCity(longitude, latitude);
					},
					fail:err => {}
				})
			},
			// 点击调起地图查看位置
			onTap(event) {
				const that = this;
				that.currentIndex = -1;
				let {latitude, longitude} = event.detail;
				that.latitude = latitude;
				that.longitude = longitude;
				that.addMaekers(longitude, latitude);
				that.loadCity(longitude, latitude);
			},
			// 添加标记
			addMaekers(longitude, latitude) {
				this.markers = [{
					id: 1,
					width: 48,
					height: 48,
					latitude,
					longitude,
					iconPath: '../../static/image/marker.png',
				}]
			},
			// 位置逆解析
			async loadCity(longitude, latitude,key) {
				let result = await wxGetAddress({ longitude, latitude });
				this.allList = result.regeocodeData.pois;
				this.list = this.allList;
				let {city, district} = result.regeocodeData.addressComponent;
				this.region = city + district;
				// this.changeAdd(this.list[0], 0);
				if(this.checkedAdd) {
					this.checkedAddress();
				} else {
					this.currentIndex = -1;
				}
				uni.setStorageSync('city',city);
			},
			// 选择地点
			changeAdd(item, index){
				let arr = item.location.split(',');
				let longitude = arr[0];
				let latitude = arr[1];
				this.currentIndex = index;
				this.latitude = latitude;
				this.longitude = longitude;
				this.addMaekers(this.longitude, this.latitude);
				uni.setStorageSync('address',item.address);
			},
			// 查找
			filterAdd(e) {
				let value = e.detail.value;
				if(value) {
					let arr = [];
					arr = this.list.filter(ele => (ele.address).includes(value));
					this.list = arr;
				} else {
					this.list = this.allList;
				}
			},
			// 已选中地址高亮
			checkedAddress() {
				if(this.list.length > 0) {
					this.list.forEach((item, index) => {
						if(item.address === this.checkedAdd) {
							this.currentIndex = index;
							this.changeAdd(item, index);
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.select-box {
		padding: 20rpx;
		background-color: #fff;
		.search {
			padding-left: 20rpx;
			width: 690rpx;
			height: 60rpx;
			border-radius: 15rpx;
			background-color: rgb(235,235,235);
			caret-color: #999;
		}
	}
	.item {
		padding: 12rpx 10rpx;
		font-weight: 400;
		border-bottom: 1rpx solid #c6c6c6;
		box-sizing: border-box;
		&:last-child {
			border-bottom: 0;
		}
		.title {
			font-size: 28rpx;
			color: rgb(51, 51, 51);
		}
		.title-sub {
			margin-top: 8rpx;
			color: #999;
			font-size: 24rpx;
		}
	}
	.item-active {
		.title {
			color: #FF0E25;
		}
		.title-sub {
			color: #FF0E25;
		}
	}
	.none {
		text-align: center;
		height: 100%;
	}
</style>